<template>
    <view class="bg-content">
        <view v-if="tbCommunityDynamic">
            <div style="background-color: white; width: 100%; padding: 10px;">
                <div style="padding: 10px 0px; border-bottom: 1px solid #eeeeee;">标题：{{tbCommunityDynamic.title}}</div>
                <div style="padding: 10px 0px; border-bottom: 1px solid #eeeeee;">发布时间：{{tbCommunityDynamic.showTime}}</div>
                <div style="padding: 10px 0px; border-bottom: 1px solid #eeeeee;">发布者：{{tbCommunityDynamic.name}}
                </div>
                <div style="padding: 10px 0px;">
                    <div style="margin-bottom: 15px;">发布内容：</div>
                    <div style="display: inline-block; width: 100%;">
                        <div v-for="(item, index) in tbCommunityDynamic.sysFileList" :key="item.id">
                            <u-image :src="item.content" alt="图片加载失败"
                                     v-if="item.type === 'image/jpeg'" mode="widthFix"
                                     style="pointer-events: none; width:100%;"/>
                            <div class="textCotent" v-if="item.type === 'html'" v-html="item.content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </view>

        <view class="all-reply" v-if="tbCommunityDynamic">
            <view class="all-reply-top">全部留言（{{ pagination.total }}）</view>
            <view class="item" v-if="!tbCommunityDynamicCommentList.length" style="color: #7a7a7a; text-align: center; padding: 15px;">
                暂无留言信息...
            </view>
        </view>
        <div v-if="!tbCommunityDynamicCommentList.length" style="height: 90px;"></div>

        <view class="comment" v-for="(item, index) in tbCommunityDynamicCommentList" :key="item.id">
            <view class="left">
                <myImg :obj="item" :sysFile="{fkId: item.userId}" class="picture"
                       :customStyle="'pointer-events: none; height: 50px;  width:50px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                       :defaultUrl="'/pages/sub/sub1-tabs/static/default-image/user-avatar.png'" :imageView="'imageView2/1/w/50/h/50'"></myImg>
            </view>
            <view class="right">
                <!--评价内容-->
                <view class="top">
                    <div @click="replyComment(item)">
                        <view class="name">
                            {{ item.name }}&nbsp;&nbsp;
                        </view>
                    </div>
                </view>
                <view class="content" @click="replyComment(item)">{{ item.content }}</view>

                <!--回复内容-->
                <view class="reply-box" v-if="item.replyNum"
                      @click="navigateTo(`/pages/sub/sub1-tabs/tabs/community-dynamic/community-dynamic-list/community-dynamic-detail/community-dynamic-detail-comment-detail/index`, null, item)">

                    <view class="item" v-for="(reply, index) in item.replyList" :key="reply.index">
                        <view class="username">{{ reply.name }}</view>
                        <view class="text">{{ reply.content }}</view>
                    </view>
                    <view class="all-reply" v-if="item.replyList != undefined">
                        共{{ item.replyNum }}条回复
                        <u-icon class="more" name="arrow-right" :size="26"></u-icon>
                    </view>
                </view>

                <view class="bottom">
                    {{item.showTime}}
                    <view class="reply" @click="replyComment(item)">回复</view>
                </view>
            </view>
        </view>

        <div style="padding-top: 10px;" :style="{'padding-bottom': !!selectedComment ? '100px' : '90px'}" v-if="tbCommunityDynamicCommentList.length">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>

        <div class="custom-bottom-bar">
            <div style="width: 100%; padding: 10px;">
                <div style="padding-bottom: 8px;" v-if="selectedComment">
                    <span style="color: #666;">
                        <div>回复 @{{selectedComment.name}}</div>
                        <u-icon name="close" style="padding-left: 5px;" size="26" :color="$u.color['error']" @click="delReplyComment()"></u-icon>
                    </span>
                </div>
                <u-input type="textarea" height="70" :clearable="false" :focus="autoFocus" placeholder="说点什么吧" v-model="comment"/>
            </div>
            <div style="width: 100px; padding: 10px;">
                <u-button @click="sendComment()">发送</u-button>
            </div>
        </div>
    </view>
</template>

<script>

    import {TbCommunityDynamicCommentService} from "@/dev/services/tb-community-dynamic-comment.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbCommunityDynamicService} from "@/dev/services/tb-community-dynamic.service";
    import {toValue} from "@/dev/core/utils/filters.util";
    import myImg from '@/components/my-img'
    import {TbCommunityDynamicReadedService} from "@/dev/services/tb-community-dynamic-readed.service";

    export default {
        data() {
            return {
                tbCommunityDynamic: null,
                tbCommunityDynamicCommentList: [],  // 评论列表
                comment: '',  // 评论
                selectedComment: null,
                autoFocus: false
            }
        },
        components: {
            myImg
        },
        onReady() {
            const _self = this;
            new TbCommunityDynamicService().findTbCommunityDynamicById(_self.objParams.id).then(result => {
                _self.tbCommunityDynamic = result;

                // 将当前动态标记为已读状态
                new TbCommunityDynamicReadedService().saveTbCommunityDynamicReaded({
                    communityId: _self.tbCommunityDynamic.communityId,
                    communityDynamicId: _self.tbCommunityDynamic.id,
                    userId: _self.globalVariable.userInfo.id
                }).then(() => {
                });
            });
        },
        onShow() {
            this.doRefresh(this.tbCommunityDynamicCommentList);
        },
        methods: {
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbCommunityDynamicCommentService().findTableTbCommunityDynamicCommentList({
                    pagination: _self.pagination,
                    data: {
                        communityDynamicId: _self.objParams.id,
                        parentId: 'root',
                        orderBy: 'create_time desc'
                    },
                }).then(result => {
                    _self.pagination.refreshPage(result);

                    // 随机生成匿名名称
                    result.list.forEach((item, index) => {
                        _self.addName(item, index);
                    });

                    _self.tbCommunityDynamicCommentList = [..._self.tbCommunityDynamicCommentList, ...result.list];

                    // 更新showTime
                    _self.tbCommunityDynamicCommentList.forEach((item, index) => {
                        item.showTime = CommonUtil.showTime(item.createTime);
                    });
                });
            },

            addName(item, index) {
                const _self = this;
                if (!item.isAnonymous) {
                    item.name = toValue('item.sysUser.name', item, '昵称未设置');
                } else {
                    item.name = '匿名用户' + CommonUtil.randomStr(3) + (_self.tbCommunityDynamicCommentList.length + index);
                }

                item.replyList.forEach((innerItem, innerIndex) => {
                    if (!innerItem.isAnonymous) {
                        innerItem.name = toValue('innerItem.sysUser.name', innerItem, '昵称未设置');
                    } else {
                        innerItem.name = '匿名用户' + CommonUtil.randomStr(3) + innerIndex;
                    }
                })
            },

            /**
             * 回复点击的评论
             * @param item
             */
            replyComment(item) {
                const _self = this;
                _self.selectedComment = item;
                _self.autoFocus = true;
                _self.$forceUpdate();
            },

            /**
             * 删除选中的评论
             * @param focus
             */
            delReplyComment(focus = true) {
                const _self = this;
                _self.selectedComment = null;
                _self.autoFocus = true;
                _self.$forceUpdate();
            },

            /**
             * 发送评论
             */
            sendComment() {
                const _self = this;
                if (_self.comment.trim() === '') {
                    _self.comment = '';
                    CommonUtil.toast('说点什么吧');
                    return;
                }

                // 遇到双空格时换行内容
                let content = _self.comment.replace(/  /g, '<br>');
                content = content.replace(/(\<br\>){2,}/g, '<br>');

                let data = {
                    parentId: 'root',
                    parentIds: 'root,#',
                    communityDynamicId: _self.tbCommunityDynamic.id,
                    userId: _self.globalVariable.userInfo.id,
                    content: content,
                    isAnonymous: false
                };

                // 回复某评论
                if (_self.selectedComment) {
                    data.parentId = _self.selectedComment.id;
                    data.parentIds = _self.selectedComment.id + ',' + _self.selectedComment.parentIds;
                }

                new TbCommunityDynamicCommentService().saveTbCommunityDynamicComment(data).then(result => {
                    result.sysUser = _self.globalVariable.userInfo;
                    result.replyNum = 0;
                    result.replyList = [];
                    _self.addName(result, 0);

                    if (_self.selectedComment) {
                        _self.selectedComment.replyList.splice(0, 0, result);
                        _self.selectedComment.replyNum = _self.selectedComment.replyNum + 1;
                    } else {
                        _self.tbCommunityDynamicCommentList.splice(0, 0, result);
                        _self.pagination.total = _self.pagination.total + 1;
                    }

                    // 更新showTime
                    _self.tbCommunityDynamicCommentList.forEach(item => {
                        item.showTime = CommonUtil.showTime(item.createTime);
                    });

                    _self.selectedComment = null;
                    _self.comment = '';
                    _self.delReplyComment(false);
                    _self.$forceUpdate();
                    CommonUtil.toast('发送成功！');
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
